import { messages, deepFullCopy } from "share/common";
import React from "react";
import { connect } from "react-redux";
import { message, Icon, Modal, Button, Row, Col, Input, Timeline, Spin, Radio, Alert } from "antd";
const TextArea = Input.TextArea;
import approveService from "containers/approve/approve.service";
import errorMessage from "share/errorMessage";
import "styles/approve/approve-check-tips.scss";
import Condition from "components/condition";
const If = Condition.If;
import Skeleton from "components/skeleton";
import noNode from "images/no-node.png";

class ApproveCheckTips extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentWillMount() {}

  componentWillReceiveProps(nextProps) {}

  //isSuccess 是否是成功的返回
  closeModal = (isSuccess) => {
    const { onClose } = this.props;
    if (onClose) {
      onClose(isSuccess);
    }
  };

  /**
   * 处理warningList里的message，存在分隔符为1024bugfix的情况
   * @param message
   */
  renderMessage = (message) => {
    let str = message;
    let messageList = str ? str.split("1024bugfix") : [];
    return (
      <div>
        {messageList.map((item) => {
          return <div>{item}</div>;
        })}
      </div>
    );
  };

  render() {
    const { modalVisible, isBatch, tipList } = this.props;
    return (
      <div>
        <Modal
          width={760}
          wrapClassName="approve-check-tips-modal"
          title={messages("common-1.key1360") /*检验结果*/}
          visible={modalVisible}
          onCancel={() => this.closeModal(false)}
          maskClosable={false}
          destroyOnClose={true}
          footer={[
            <Button key="back" onClick={() => this.closeModal(false)}>
              {messages("common.cancel") /*取消*/}
            </Button>,
            <Button key="submit" type="primary" onClick={() => this.closeModal(true)}>
              {messages("common-1.key1068") /*审批通过*/}
            </Button>,
          ]}
        >
          <div style={{ maxHeight: 500, overflowY: "auto" }}>
            <If value={isBatch}>
              <Alert
                message={
                  messages("common-1.key1361", {
                    arg1: tipList.length,
                  }) /*所选单据中有{arg1}张单据存在警告内容，是否仍然审批通过？*/
                }
                type="info"
                showIcon
                style={{
                  marginBottom: 12,
                }}
              />
            </If>
            <If value={!isBatch}>
              <Alert
                message={messages("common-1.key1362") /*该单据存在以下警告内容，是否仍然审批通过？*/}
                type="info"
                showIcon
                style={{
                  marginBottom: 12,
                }}
              />
            </If>
            {tipList.map((item) => {
              return (
                <div style={{ marginBottom: 12, paddingLeft: 12 }}>
                  <div style={{ display: "inline-block", position: "relative" }}>
                    <span className="title">{item.title}</span>
                    <If value={!isBatch}>
                      <div className={`title-base ${item.type === 0 ? "title-warning" : "title-error"}`} />
                    </If>
                  </div>
                  <div>{this.renderMessage(item.message)}</div>
                </div>
              );
            })}
          </div>
        </Modal>
      </div>
    );
  }
}

ApproveCheckTips.propTypes = {
  modalVisible: React.PropTypes.bool,
  onClose: React.PropTypes.func,
  isBatch: React.PropTypes.bool, //是否是批量审批
  tipList: React.PropTypes.array, //审批校验提示
};

ApproveCheckTips.defaultProps = {
  modalVisible: false,
  onClose: () => {},
  isBatch: false,
  tipList: [],
};

function mapStateToProps(state) {
  return {};
}

export default connect(mapStateToProps)(ApproveCheckTips);
